<template>

  <div class="buid_1">

    <el-row :gutter="40" class="panel-group" >
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper  icon-money">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              借款总额
            </div>
            <span   class="card_num"></span>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-yinhang">
            <svg-icon icon-class="message" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              到期总额
            </div>
            <span   class="card_num"></span>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-jiaoyi">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              还款总额
            </div>
            <span   class="card_num"></span>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper  icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              逾期总额
            </div>
            <span   class="card_num"></span>
          </div>
        </div>
      </el-col>
    </el-row>



    <div class="buid_2">
      <div class="bus_tit">昨日汽车销量排名 and还款人排名Top3</div>
      <el-row :gutter="40">
        <el-col :xs="24" :sm="24" :lg="12">
          <el-table
            :data="amtNameList"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="rankingNo"
              label="排名"
              width=""
            />
            <el-table-column
              prop="merName"
              label="汽车名称"
              width=""
            />
            <el-table-column
              prop="ordAmt"
              label="交易金额"
            />
          </el-table>

        </el-col>

        <el-col :xs="24" :sm="24" :lg="12">

          <el-table
            :data="insterAumtList"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="rankingNo"
              label="排名"
              width=""
            />
            <el-table-column
              prop="instName"
              label="还款人名称"
              width=""
            />
            <el-table-column
              prop="ordAmt"
              label="还款金额"
            />
          </el-table>
        </el-col>
      </el-row>
    </div>
    <div class="buid_4">
      <el-row>
        <el-col :xs="24" :sm="24" :lg="12">
          <line-chart ref="echarts1" :class-name="'echarts1'" :chart-data="echarts1" />
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <line-chart ref="echarts2" :class-name="'echarts2'" :chart-data="echarts2" />
        </el-col>
      </el-row>
    </div>


    <div class="common-layoutst1 ">
      <div class="common-layoutst3 ">

      </div>
      <el-row>
        <div class="bus_con_tit">区域渠道借款量统计</div>
        <el-col>
          <line-chart ref="echarts3" :class-name="'echarts3'" :chart-data="echarts3" />
        </el-col>
      </el-row>
      <el-row>
        <div class="bus_con_tit">今日还款数</div>

        <el-col>
          <line-chart ref="echarts4" :class-name="'echarts4'" :chart-data="echarts4" />
        </el-col>
      </el-row>
    </div>

<!--    <div class="common-layoutst1 ">
      <div class="common-layoutst3 ">
        <el-form ref="queryParamsRef" :model="queryParams" :inline="true" :rules="rules1" label-width="100px">
          <el-form-item label="时间" prop="OrdDt">
            <el-date-picker
              v-model="queryParams.OrdDt"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="商户" prop="merId">
            <el-select v-model="queryParams.merId" placeholder="请选择商户" clearable>
              <el-option
                v-for="mer in merList1"
                :key="mer.merId"
                :label="mer.merName"
                :value="mer.merId"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('queryParams')">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-row>
        <div class="bus_con_tit">商户交易金额</div>
        <el-col>
          <line-chart ref="echarts3" :class-name="'echarts3'" :chart-data="echarts3" />
        </el-col>
      </el-row>
      <el-row>
        <div class="bus_con_tit">商户交易单数</div>

        <el-col>
          <line-chart ref="echarts4" :class-name="'echarts4'" :chart-data="echarts4" />
        </el-col>
      </el-row>
    </div>
    <div class="common-layout1 mar_40">
      <div class="common-layout3">
        <el-form ref="queryParamsSst" :model="queryParams1" :inline="true" :rules="rules2" label-width="100px">
          <el-form-item prop="OrdDt" label="日期">
            <el-date-picker
              v-model="queryParams1.OrdDt"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>

          <el-form-item label="银行" prop="instAbr">
            <el-select v-model="queryParams1.instAbr" placeholder="请选择银行  " clearable>
              <el-option
                v-for="mer in instList1"
                :key="mer.instAbr"
                :label="mer.instName"
                :value="mer.instAbr"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm1('queryParams1')">搜索</el-button>

          </el-form-item>
        </el-form>

      </div>
      <el-row>
        <div class="bus_con_tit">银行交易金额</div>

        <el-col>
          <line-chart ref="echarts5" :class-name="'echarts5'" :chart-data="echarts5" />
        </el-col>
      </el-row>
      <el-row>
        <div class="bus_con_tit">银行交易单数</div>
        <el-col>
          <line-chart ref="echarts6" :class-name="'echarts6'" :chart-data="echarts6" />
        </el-col>
      </el-row>
    </div>-->
  </div>
</template>

<script>

import LineChart from './dashboard/LineChart'

export default {
  name: 'Index',
  components: {
    LineChart
  },
  data() {
    return {
      amtNameList:[],
      insterAumtList:[],
      echarts1: { expectedData: '', actualData: '', legend: ['交易金额'], seriesData: [] },
      echarts2: { expectedData: '', actualData: '', legend: ['交易金额'], seriesData: [] },
      echarts3: { expectedData: '', actualData: '', legend: [], seriesData: [] },
      echarts4: { expectedData: '', actualData: '', legend: [], seriesData: [] },
    }
  },
  methods: {

  }
}
</script>

<style  lang="scss" scoped>
.buid_4{
  margin-top: 30px;
}
.mar_40{
  margin-top: 40px;
}
.bus_con_tit{
  font-size: 16px;
  padding: 20px 0;
  color: #434150;
  font-weight: 500;

}
.bus_tit{
  font-size: 20px;
  font-weight: 500;

  color: #434150;
}
.buid_1{
  width: 96%;
  position: relative;
  left: 2%;
}
.card_num{
  font-size: 20px;
  text-align: right;
  display: inline-block;
  width: 100%;
}
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-shanghu {
        background: #40c9c6;
      }

      .icon-yinhang {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-jiaoyi {
        background: #34bfa3
      }
    }

    .icon-shanghu {
      color: #40c9c6;
    }

    .icon-yinhang {
      color: #36a3f7;

    }

    .icon-money {
      color: #f4516c;

    }

    .icon-jiaoyi{
      color: #34bfa3;

    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 767px) {
  .card_num{
    font-size: 14px;
    text-align: right;
    display: inline-block;
    width: 100%;
  }
  .card-panel-text{
    font-size: 12px !important;

    transform: scale(0.9)
  }
  .card-panel-description{
    float: right;
    font-weight: bold;
    position: absolute;
    right: -10%;
    font-size: 12px;
  }

  // .card-panel-description {
  //   display: none;
  // }

  // .card-panel-icon-wrapper {
  //   float: none !important;
  //   width: 100%;
  //   height: 100%;
  //   margin: 0 !important;

  //   .svg-icon {
  //     display: block;
  //     margin: 14px auto !important;
  //     float: none !important;
  //   }
  // }
}

.buidsu{

  line-height: 25px; /*文字水平居中*/
  align-items:center;
  justify-content:flex-end;
  padding: 25px;
}

.buid_2{
  width: 100%;
}

.buid_3{
  line-height: 50px; /*文字水平居中*/
  align-items:center;
  justify-content:flex-end;
  padding: 50px;
}

.common-layoutst1 {
  margin-top: 50px;
  // height: 1500px;

}

.common-layoutst3 {
  width: 100%;
  display: flex;
  justify-content:right;

}
.common-layout1 {

  // height: 1500px;

}
.common-layout3 {
  justify-content:right;
  display: flex;
}

.el-row {
  margin-bottom: 10px;

  &
  :last-child {
    margin-bottom: 0;
  }

}
.el-col {
  border-radius: 3px;
}

.bg-purple-dark {

}

.bg-purple {

}

.bg-purple-light {

}

.grid-content {
  border-radius: 4px;
  min-height: 20px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

</style>

